<template>
<div>
   <div id="main" style="height: 600px; width: 600px"></div>
  <svg>
        <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="20%" stop-color="#ffffff"></stop>
            <stop offset="100%" stop-color="#0082ff"></stop>
        </linearGradient>
</svg>
</div>


  
</template>

<script>
export default {
  data() {
    return {
      //路由切换动画样式
      transitionName: "slide-left",
      //路由记录
      pathList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom, 'dark', { renderer: 'svg' });
      let option
      
        option = {
   backgroundColor: "#03213D",
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
         color: "#FFF",
      },
      // axisPointer: {
      // 	type: "shadow",
      // 	label: {
      // 		show: true,
      // 	},
      // },
   },
   grid: {
      left: "10%",
      top: "18%",
      right: "5%",
      bottom: "25%",
   },
   legend: {
      top: "4%",
      left: '75%',
      "itemWidth": 13,
      "itemHeight": 13,
      itemStyle: {
         color: "#18A4FF"
      },
      "icon": "rect",
      "padding": 0,
      textStyle: {
         "color": "#c0c3cd",
         fontSize: 13,
         "padding": [2, 0, 0, 0]
      }
   },
   xAxis: {
      data: ["番茄", "土豆", "大豆", "芸豆", "青椒", "玉米", "油麦菜", "韭菜"],

      axisLine: {
         show: true, //隐藏X轴轴线
         lineStyle: {
            color: "#163a5f",
            width: 2,
         },
      },
      axisTick: {
         show: false, //隐藏X轴刻度
         alignWithLabel: true,
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: "#BDD8FB", //X轴文字颜色
            fontSize: 12,
         },
         interval: 0,
         formatter: function (value) {
            var ret = ""; //拼接加\n返回的类目项
            var maxLength = 4; //每项显示文字个数
            var valLength = value.length; //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1) {
               //如果类目项的文字大于5,
               for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
               }
               return ret;
            } else {
               return value;
            }
         },
      },
   },
   yAxis: [
      {
         type: "value",
         name: "单位：Kg",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },

         splitLine: {
            show: true,
            lineStyle: {
               color: "rgba(255, 255, 255, 0.15)",
               type: 'dashed', // dotted 虚线
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 1,
            },
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: "#BDD8FB",
               fontSize: 12,
            },
         },
      },
      {
         type: "value",
         name: "",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },
         splitLine: {
            show: false,
            lineStyle: {
               width: 1,
               color: "#CED2DB",
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 2,
            },
         },
         axisLabel: {
            show: false,
            textStyle: {
               color: "#797A7F",
               fontSize: 12,
            },
         },
      },
   ],
   series: [
      {
         name: "产量统计",
         type: "bar",
         barWidth: 15,
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,  //右
               y: 0,  //下
               x2: 0,  //左
               y2: 1,  //上
               colorStops: [
                  {
                     offset: 0.1,
                     color: '#13D5FC' // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: '#2059B8' // 100% 处的颜色
                  }
               ]
            },
            barBorderRadius: [20, 20, 20, 20],
         },
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#1ACDDC",
            formatter: "{c}" + "次",
         },
         data: [200, 85, 112, 275, 305, 415, 741, 405],
      },
      {
         // name: '背景',
         type: "bar",
         barWidth: "15px",
         xAxisIndex: 0,
         yAxisIndex: 1,
         barGap: "-110%",
         data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
         itemStyle: {
            normal: {
               color: "rgba(255,255,255,0.039)",
               barBorderRadius: [20, 20, 20, 20],
            },
         },
         tooltip: {
            show: false,
         },
         zlevel: 9,
      },
   ],
}
myChart.setOption(option)      
    },
  },
};
</script>
<style>
.el-table {
  background-color: transparent;
}

.el-table tr {
  background-color: transparent;
}

.el-table thead {
  color: lightblue;
  background-color: transparent;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background-color: transparent;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}

.el-table--border th.el-table__cell.gutter:last-of-type {
  background-color: transparent;
}

.el-table .red_class {
  color: red;
  background-color: yellow;
}

.el-table .yellow_class {
  color: yellow;
  background-color: green;
}

.el-table .blue_class {
  color: blue;
  background-color: white;
}
</style>